<template>
  <div class="login" v-show="show">
    <div class="denglu">
      <div class="bt">金正大分销系统</div>
      <el-form label-position="top" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model.number="ruleForm.username" placeholder="用户名："></el-input>
        </el-form-item>
        <el-form-item prop="pass" style="margin: 30px 0">
          <el-input type="password" v-model="ruleForm.pass" placeholder="密码：" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item class="tijiao">
          <el-button plain @click="userLogin">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import {mapGetters,mapActions} from 'vuex'
export default {
  name: 'login',
  data () {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      }
      setTimeout(() => {
        callback()
      }, 1000)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      ruleForm: {
        pass: '',
        username: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        username: [
          { validator: checkAge, trigger: 'blur' }
        ]
      },
      show: true
    }
  },
  methods: {
    resetForm () {
      this.ruleForm.pass = ''
      this.ruleForm.username = ''
    },
    open (message, type) {
      this.$message({
        message: message,
        type: type
      })
    },
    userLogin () {
      if (this.rules.username.length > 0 && this.rules.pass.length > 0) {
        this.$axios.post('' + this.$api.login.login,
          {
            userName: this.ruleForm.username,
            userPwd: this.ruleForm.pass
          }).then((res) => {
          console.log(res)
          if (res.data.code === 200) {
            // console.log(res.data.data)
            // 触发 action  事件
            if (res.data.data.length === 2) {
              this.$store.dispatch('setToken', res.data.data[0].token)
            } else if (res.data.data.length === 3) {
              this.$store.dispatch('setToken', res.data.data[1].token)
            }
            // switch (res.data.data.length) {
            //   case 2: this.$store.dispatch('setToken', res.data.data[0].token); return // 保存token
            //   case 3: this.$store.dispatch('setToken', res.data.data[1].token); return // 保存token
            // }
            // this.$store.dispatch('setToken', res.data.data[0].token)
            // this.$store.dispatch('setToken', res.data.data[1].token)
            // console.log(res.data.data[1])
            this.$store.dispatch('loginSuccess', res.data.data) // 保存用户数据
            this.$store.dispatch('setNoRefresh') // 重新刷新设置为false
            console.log('login')
            console.log(this.$store.getters.getUserInfo)
            // this.$router.addRoutes() // 添加路由
            this.$router.push({ path: this.$api.manage.manage }) // 跳转到home组件
            this.open('登陆成功！', 'success')
          } else {
            this.open('登陆失败，请检查账号或密码是否正确。', 'warning')
            console.log(res.data.message)
          }
        })
      } else {
        this.open('请输入账号或密码', 'warning')
      }
    }
  }
}
</script>
<style scoped>
button{
  display: inline-block;
  width: 20%;
  padding: 10px;
  margin: 10px 0;
}
button:hover{
  color: gray;
  border: gray;
}
.tijiao{
text-align: right;
}
.denglu{
  border-radius: 5px;
  position: absolute;
  left: 10%;
  top: 40%;
  padding: 20px 30px 20px 30px;
  background: rgba(255,255,255,0.6);
  width: 20%;
  /*border: 1px solid red;*/
}
.bt{
  text-align: center;
  font-size: 30px;
  width: 300px;
  margin: 15px auto;
  color: rgb(247,132,0);
}
*{
  margin: 0;
  padding: 0;
}
.login{
  background: url("./../../public/images/background.jpg") center;
  background-size: 100%;
  border-top: 1px solid green;
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
